<template>
	<sw-common-frame :loading="loading">
		<div class="base_info_wrapper">
			<el-form ref="form" label-position="top" slot="component">
				<el-row :gutter="20">
					<el-col v-for="(item, index) in baseInfoList" :key="index" :span="item.type | colSpanFilter">
						<el-form-item :prop="item.code">
							<template slot="label">
								<span>{{ item.label }}</span>
								<i class="el-icon-edit"></i>
							</template>
							<template v-if="item.type === '1'">
								<el-input v-model="item.value" placeholder="请输入内容"></el-input>
							</template>
							<template v-if="item.type === '2'">
								<sw-image-uploader class="image" accept="ico,png,jpg,jpeg" v-model="item.value" />
							</template>
							<template v-if="item.type === '3'">
								<el-input v-model="item.value" v-bind="textareaConfig"></el-input>
							</template>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div class="button">
				<el-button type="primary" @click="handleSaveSiteInfo()">保存网站信息</el-button>
			</div>
		</div>
	</sw-common-frame>
</template>

<script>
import lodash from 'lodash';
import listMixins from '@/mixins/listMixins';
import { getBaseInfoList, updateBaseInfo } from '@/api/system/sysBaseInfo';
export default {
	mixins: [listMixins],
	data() {
		return {
			formData: {},
			pageName: '基本信息',
			queryData: { page: 1, limit: 999 },
			textareaConfig: {
				type: 'textarea',
				placeholder: '请输入内容',
				autosize: { minRows: 2, maxRows: 4 }
			},
			baseInfoList: []
		};
	},
	computed: {
		listFunction() {
			return eval(getBaseInfoList);
		},
		tableListData() {
			return this.tableData;
			// return this.tableData.filter((n) => n.scopeType !== '3');
		}
	},
	filters: {
		colSpanFilter(input) {
			return input === '2' ? 6 : 24;
		}
	},
	watch: {
		tableListData(arr) {
			console.log(arr);
			this.baseInfoList = lodash.cloneDeep(arr);
		}
	},
	methods: {
		handleSaveSiteInfo() {
			let arr1 = this.baseInfoList;
			let arr2 = this.tableListData;
			let diffArr = lodash.differenceWith(arr1, arr2, lodash.isEqual);
			let requestArr = diffArr.map((item) => this.updateSiteBaseInfo(item));
			Promise.all(requestArr).then(() => {
				this.$message.success('保存基本信息成功');
			});
		},

		//更新网站基本信息
		updateSiteBaseInfo(data) {
			return new Promise((resolve) => {
				updateBaseInfo(data).then((res) => {
					let result = res.data;
					if (result.code === '0') {
						resolve();
					}
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.base_info_wrapper::v-deep {
	display: flex;
	flex-direction: column;
	height: 100%;
	.el-form {
		flex: 1;
		overflow: hidden;
		overflow-y: auto;
		padding: 16px 16px 0;
	}
	.el-form-item__label {
		display: flex;
		align-items: center;
		font-weight: bold;
		line-height: 1;
		span {
			margin-right: 10px;
		}
	}
	.image {
		display: inline-block;
	}
	.button {
		flex-shrink: 0;
		padding: 16px 16px 0;
		border-top: solid 1px #e4e7ed;
	}
}
</style>
